
.SpeedControl {
  user-select: none;
  font-family: Courier, "IBM Plex Mono", monospace;
  font-size: 1.1em;
  background-color: var(--fg-color);  

  & > .options {
    display: grid; 
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    grid-gap: 3px;
  
    & > button {
      width: 100%;
      text-align: center;
      border: none;
      padding: var(--padding) 0px;
      
      &:focus {
        outline: 1px solid var(--focus-color);
      }
  
      &.selected {
        background-color: var(--speed-focus-bg-color);
        color: var(--speed-focus-text-color);
      }
    }
  
  }
  
  & > .NumericControl {
    margin-top: 15px;

    button, input[type="text"] {
      padding: 0;
    }
  }

  & > .slider {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center; 
    margin-top: 15px;
    column-gap: 5px; 

    & > svg {
      color: var(--header-icon-color);
      opacity: 0.5;

      &.active {
        opacity: 1;
        color: var(--header-icon-active-color);
      }
    }
  }
}